﻿{% extends "mybase.html" %}
{% block midbody %}
    <!-- partial:index.partial.html -->
    <div class="container clearfix" style="width: 100%;height: 100%;padding: 0">
        <div class="chat">
            <div class="chat-header clearfix">
                <div class="chat-about">
                    <div class="chat-with">My AIChat</div>
                    {#                    <div class="chat-num-messages">信息数量 messages</div>#}
                </div>
            </div>
            <!-- end chat-header -->
            <div class="chat-history">
                <ul>
                    {% if chatlog %}
                        {% for log in chatlog %}
                            <li class="clearfix" style="display:block">
                                <div class="message-data align-right">
                                    <span class="message-data-time">{{ log.created_at }}, Today</span>
                                    <span class="message-data-name">我</span>
                                </div>
                                <div class="message other-message float-right"
                                     style="width: auto;max-width: 100%;">
                                    <pre style="white-space:pre-wrap;">{{ log.question }}</pre>
                                </div>
                            </li>

                            <li class="clearfix">
                                <div class="message-data">
                                    <span class="message-data-name">棉棉</span>
                                    <span class="message-data-time">{{ log.created_at }}, Today</span>
                                </div>
                                <div class="message my-message float-left" style="width: auto;max-width: 100%;">
                                    <pre style="white-space:pre-wrap;">{{ log.answer }}</pre>
                                </div>
                            </li>

                        {% endfor %}
                    {% else %}
                        <li class="clearfix">
                                <div class="message-data">
                                    <span class="message-data-name">棉棉</span>
                                    <span class="message-data-time">Today</span>
                                </div>
                                <div class="message my-message float-left" style="width: auto;max-width: 100%;">
                                    <pre style="white-space:pre-wrap;">您好！有什么我可以帮助您的吗？</pre>
                                </div>
                            </li>
                    {% endif %}
                </ul>
            </div>
            <!-- end chat-history -->
            <div class="chat-message clearfix">
                <textarea name="message-to-send" id="message-to-send" placeholder="" rows="3"></textarea>
                <button id="send" name="send">Send</button>
            </div>
            <!-- end chat-message -->
        </div>
        <!-- end chat -->
    </div>
{% endblock %}
